<template>
	<view class="box" >
		<view  class="header-box">
			<view class="header">
				<view class="personal-information">
					<text>姓名：{{Data.user.name}}</text>
					<text>性别：{{Data.user.gender==1?'男':'女'}}</text>
					<text>年龄：{{Data.user.age}}</text>
				</view>
				<view class="date">
					<text>入院日期：{{Data.user.inHospitalTime}}</text>
					<text>出院日期：{{Data.user.leaveHospitalTime}}</text>
					<text>住院天数：{{Data.user.time}}天</text>
				</view>
				<view class="text">
					<text>合计：</text>
					<text >￥{{Data.list.money}}</text>
				</view>
			</view>
		</view>
		<view v-if="Data.list.dates!=undefined " class="content" >
			<text>日期</text>
			<view  class="content-date" @click="checklist(v)" v-for="v in Data.list.dates" :key="v">
				<text>{{v}}</text>
				<text>￥{{Math.floor(Data.list.money/Data.user.time)}}</text>
			</view>
		</view>
		<view v-else class="no-data"  >
			<text>暂无数据</text>
		</view>
		<view class="footer"></view>
	</view>
</template>

<script setup>
import {reportFormStore} from '@/store/reportFormStore'
import {FeeDetailsApi,PeriodHospitalizationApi} from '@/api/ViewServices'
import {onLoad} from "@dcloudio/uni-app"
import { reactive,onMounted } from "vue";
const userId=reportFormStore()

let Data=reactive({
	id:'',
	user:'',
	patientId:'',
	list:'',
	length:'',
	dates:''
})
let checklist = (v) => {
	uni.navigateTo({
		url: `/pages/checklist/checklist?id=${Data.patientId}&time=${v}`
	})
}
onLoad((option)=>{
	Data.id=option.id
	Data.patientId=option.patientId
})
onMounted(()=>{
	FeeDetailsApi({id:Data.id}).then(({data})=>{
		Data.user=data.data
	})
	PeriodHospitalizationApi({id:Data.id,patientId:Data.patientId}).then(({data})=>{
		if(data.data!=undefined){
			Data.list=data.data
			Data.length=data.data.dates.length
		}
		
	})
	console.log(Data.list.money)
	
})
</script>

<style scope lang="less">
.box {
	width: 750rpx;
	height: 1174rpx;
	background-color: #fbfdff;
}
.header-box {
	width: 750rpx;
	height: 440rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.header {
	width: 688rpx;
	height: 376rpx;
	border-radius: 10rpx;
	background: #f3f8fe;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.personal-information {
	width: 630rpx;
	height: 44rpx;
	display: flex;
	justify-content: space-between;
	margin: 0 30rpx;
	font-size: 30rpx;
	color: #474848;
}
.date {
	display: flex;
	flex-direction: column;
	margin: 36rpx 0 0 30rpx;
	font-size: 24rpx;
	color: #acabaa;
	border-bottom: 1px dashed #dedfe0;
	text {
		margin-bottom: 28rpx;
	}
}
.text {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 30rpx 30rpx 0 0;
}
.text text:nth-child(1) {
	font-size: 28rpx;
}
.text text:nth-child(2) {
	font-size: 34rpx;
	color: #f46a6a;
}
.content {
	width: 688rpx;
	background-color: white;
	border-radius: 10rpx;
	margin: 0 30rpx;
	box-shadow: 0 0 2px #e0e0e0;
	display: flex;
	flex-direction: column;

	.content-date {
		height: 92rpx;
		margin: 0 22rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #dedfe0;
	}
	.content-date text:nth-child(1) {
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC',
			sans-serif;
		font-size: 28rpx;
	}
	.content-date text:nth-child(2) {
		color: #333333;
		font-size: 30rpx;
	}
}
.content > text {
	height: 88rpx;
	margin: 0 22rpx;
	display: flex;
	align-items: center;
	font-size: 30rpx;
	color: #b0b0b0;
	border-bottom: 1px solid #dedfe0;
}
	.no-data{
		display: flex;
		justify-content: center;
		margin: 200rpx 100rpx;
		font-size: 40rpx;
	}
</style>
